<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child" size="small">
          <TabPane tab="main_tabs_child" label="基础配置">
            <Form :label-width="110">
              <FormItem label="默认展示地图">
                <Select :transfer="true" :filterable="true" size="small" v-model="compConfigData.map">
                  <Option v-for="item in provinces" :value="item.adcode" :key="item.adcode">{{ item.alias_name }}</Option>
                </Select>
              </FormItem>
              <FormItem label="开启下钻">
                <Tooltip content="开启之后，点击某个区域时会自动加载此区域的区域地图" max-width="200" placement="left">
                  <i-switch v-model="chartOption.openRunInHole">
                    <span slot="open"></span>
                    <span slot="close"></span>
                  </i-switch>
                </Tooltip>
              </FormItem>
            </Form>

            <div class="m-t-5px"></div>
            <Collapse value="1">
              <Panel name="1">
                地图样式配置
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="开启缩放与平移">
                      <i-switch v-model="chartOption.geo.roam">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="长宽比例">
                      <InputNumber size="small" :max="1" :min="0" :step="0.01" v-model="chartOption.geo.aspectScale"></InputNumber>
                    </FormItem>
                    <FormItemPanel title="地图尺寸与偏移">
                      <FormItem label="大小">
                        <Input size="small" v-model="chartOption.geo.layoutSize" placeholder=""/>
                      </FormItem>
                      <FormItem label="横向偏移">
                        <Input size="small" v-model="chartOption.geo.layoutCenter[0]" placeholder=""/>
                      </FormItem>
                      <FormItem label="纵向偏移">
                        <Input size="small" v-model="chartOption.geo.layoutCenter[1]" placeholder=""/>
                      </FormItem>
                    </FormItemPanel>

                    <Collapse>
                      <Panel name="1">
                        区域样式配置
                        <div slot="content">
                          <FormItemPanel title="默认状态">
                            <FormItem label="区域颜色">
                              <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.areaColor" alpha recommend/>
                            </FormItem>
                            <FormItem label="边框颜色">
                              <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.borderColor" alpha recommend/>
                            </FormItem>
                            <FormItem label="边框大小">
                              <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.itemStyle.borderWidth"></InputNumber>
                            </FormItem>
                            <FormItem label="边框类型">
                              <Select :transfer="true" size="small" v-model="chartOption.geo.itemStyle.borderType">
                                <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="阴影大小">
                              <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.itemStyle.shadowBlur"></InputNumber>
                            </FormItem>
                            <FormItem label="阴影颜色">
                              <PnColorPicker size="small" v-model="chartOption.geo.itemStyle.shadowColor" alpha recommend/>
                            </FormItem>
                          </FormItemPanel>
                          <FormItemPanel title="高亮状态">
                            <FormItem label="区域颜色">
                              <PnColorPicker size="small" v-model="chartOption.geo.emphasis.itemStyle.areaColor" alpha recommend/>
                            </FormItem>
                            <FormItem label="边框颜色">
                              <PnColorPicker size="small" v-model="chartOption.geo.emphasis.itemStyle.borderColor" alpha recommend/>
                            </FormItem>
                            <FormItem label="边框大小">
                              <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.emphasis.itemStyle.borderWidth"></InputNumber>
                            </FormItem>
                            <FormItem label="边框类型">
                              <Select :transfer="true" size="small" v-model="chartOption.geo.emphasis.itemStyle.borderType">
                                <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="阴影大小">
                              <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.emphasis.itemStyle.shadowBlur"></InputNumber>
                            </FormItem>
                            <FormItem label="阴影颜色">
                              <PnColorPicker size="small" v-model="chartOption.geo.emphasis.itemStyle.shadowColor" alpha recommend/>
                            </FormItem>
                          </FormItemPanel>
                        </div>
                      </Panel>
                      <Panel name="3">
                        地名
                        <div slot="content">
                          <FormItem label="显示">
                            <i-switch v-model="chartOption.geo.label.show">
                              <span slot="open"></span>
                              <span slot="close"></span>
                            </i-switch>
                          </FormItem>
                          <FormItem label="字体颜色">
                            <PnColorPicker size="small" v-model="chartOption.geo.label.color" alpha recommend/>
                          </FormItem>
                          <FormItem label="字体大小">
                            <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.label.fontSize"></InputNumber>
                          </FormItem>
                          <FormItem label="背景颜色">
                            <PnColorPicker size="small" v-model="chartOption.geo.label.backgroundColor" alpha recommend/>
                          </FormItem>
                          <FormItem label="边框颜色">
                            <PnColorPicker size="small" v-model="chartOption.geo.label.borderColor" alpha recommend/>
                          </FormItem>
                          <FormItem label="边框大小">
                            <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.label.borderWidth"></InputNumber>
                          </FormItem>
                          <FormItem label="边框圆角大小">
                            <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.label.borderRadius"></InputNumber>
                          </FormItem>
                          <FormItem label="内边距">
                            <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.label.padding"></InputNumber>
                          </FormItem>
                          <FormItem label="阴影颜色">
                            <PnColorPicker size="small" v-model="chartOption.geo.label.shadowColor" alpha recommend/>
                          </FormItem>
                          <FormItem label="阴影大小">
                            <InputNumber size="small" :max="100" :min="0" v-model="chartOption.geo.label.shadowBlur"></InputNumber>
                          </FormItem>
                          <FormItem label="格式化">
                            <Input size="small" v-model="chartOption.geo.label.formatter" placeholder=""/>
                          </FormItem>
                        </div>
                      </Panel>
                    </Collapse>

                  </Form>
                </div>
              </Panel>
              <Panel name="3">
                提示框配置
                <div slot="content">
                  <Alert style="padding: 8px; text-align: justify;">
                    此处的配置影响的是所有图层的提示框配置
                  </Alert>
                  <Form :label-width="80">
                    <FormItem label="是否显示">
                      <i-switch v-model="chartOption.tooltip.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel v-if="chartOption.title">
                标题
                <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
                <div slot="content">
                  <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
                </div>
              </Panel>
              <Panel>
                其他
                <div slot="content">
                  <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
                </div>
              </Panel>
            </Collapse>

          </TabPane>
          <TabPane tab="main_tabs_child" label="图层">
            <Button class="float-right" size="small" type="primary"
                    @click="selectCoverageModalVisible = !selectCoverageModalVisible"><Icon type="md-add" /> 添加图层</Button>
            <div class="clearfix"></div>
            <div class="m-b-10px"></div>

            <Collapse>
              <Panel :name="item.id" v-for="(item, index) in chartOption.series" :key="index">
                {{item.type | seriesTypeName}}（{{item.name}}）
                <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteSeriesItem(index, item)"><Icon type="md-trash" /></a>
                <div slot="content">
                  <component :is="seriesFormName(item.type)" :value="item">
                    <CPMVisualMapContinuousSettingForm slot="visualMapSettingForm"
                                                       v-if="item.type == 'map' || item.type == 'heatmap'"
                                                       :value="getVisualMapObj(item.id)"></CPMVisualMapContinuousSettingForm>
                  </component>
                </div>
              </Panel>
            </Collapse>

          </TabPane>
        </Tabs>

      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <Alert show-icon type="warning" style="padding-right: 8px;">
          本组件不支持CSV数据源与数据库数据源，具体数据源的使用方法请点击组件使用说明进行查看
        </Alert>
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="ChinaProvinceMapChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

    <Modal
        v-model="selectCoverageModalVisible"
        title="选择图层"
        :width="560"
        :mask-closable="false"
        ok-text="添加图层"
        @on-ok="addSeriesItem"
        @on-cancel="selectCoverageModalVisible = false; coverageSelected = ''">
      <Row :gutter="10">
        <i-col span="8" v-for="(ct, index) in coverageTypes" :key="index">
          <div class="coverage-card">
            <img :src="ct.image"
                 :class="{'active': coverageSelected == ct.value}"
                 @click.stop="coverageSelected = ct.value"/>
            <p>{{ ct.name }}</p>
          </div>
        </i-col>
      </Row>
    </Modal>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'
  import ChinaProvinceMapChart from './ChinaProvinceMapChart'
  import _ from 'lodash'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ChinaProvinceMapChartForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {
        selectCoverageModalVisible: false,
        coverageTypes: [
          {id: '1', name: '区域热力层', value: 'map', image: require('./images/map-coverage.png')},
          {id: '2', name: '涟漪气泡层', value: 'effectScatter', image: require('./images/effectScatter-coverage.png')},
          {id: '3', name: '矢量散点层', value: 'scatter', image: require('./images/scatter-coverage.png')},
          {id: '4', name: '飞线层', value: 'lines', image: require('./images/lines-coverage.png')},
          {id: '5', name: '点热力层', value: 'heatmap', image: require('./images/heatmap-coverage.png')},
        ],
        provinces: [],

        coverageSelected: ''
      }
    },
    mounted() {
      this.$PnApi.MapGeoJsonApi.getMapBaseInfoByLevel('province,country').then(result => {
        this.provinces = result.data;
      })
    },
    methods: {

      addSeriesItem () {
        if (!this.coverageSelected) {
          this.$Message.warning('未选择需要添加的图层')
        }
        if (this.coverageSelected == 'map') {
          let newId = this.$PnUtil.uuid();
          this.chartOption.series.push(ChinaProvinceMapChart.buildMapSeriesOption(newId, '区域热力层'));
          this.chartOption.visualMap.push(
              ChinaProvinceMapChart.buildContinuousVisualMapOption(
                  newId,
                  0,
                  1000,
                  ['#3dcfff', '#273bff'],
                  _.findIndex(this.chartOption.series, {id: newId})
              )
          )
        }else if (this.coverageSelected == 'effectScatter') {
          this.chartOption.series.push(ChinaProvinceMapChart.buildEffectScatterSeriesOption('', '涟漪气泡'))
        }else if (this.coverageSelected == 'scatter') {
          this.chartOption.series.push(ChinaProvinceMapChart.buildScatterSeriesOption('', '矢量散点'))
        }else if (this.coverageSelected == 'lines') {
          this.chartOption.series.push(ChinaProvinceMapChart.buildLinesSeriesOption('', '飞线层'))
        }else if (this.coverageSelected == 'heatmap') {
          let newId = this.$PnUtil.uuid();
          this.chartOption.series.push(ChinaProvinceMapChart.buildHeatmapSeriesOption(newId, '点热力层'));
          this.chartOption.visualMap.push(
              ChinaProvinceMapChart.buildContinuousVisualMapOption(
                  newId,
                  0,
                  500,
                  ['#ef9a9a', '#f44336', '#b71c1c'],
                  _.findIndex(this.chartOption.series, {id: newId})
              )
          )
        }
        this.coverageSelected = ''
      },

      deleteSeriesItem (index, seriesItem) {
        this.chartOption.series.splice(index, 1);
        if (seriesItem.type == 'map' || seriesItem.type == 'heatmap') {
          this.chartOption.visualMap.splice(_.findIndex(this.chartOption.visualMap, {id: seriesItem.id}), 1)
        }
        this.$EventBus.$emit('pn_chinaProvinceMap_deleteSeriesItem')
      },

      getVisualMapObj (seriesItemId) {
        return _.find(this.chartOption.visualMap, {id: seriesItemId})
      },

      seriesFormName (type) {
        switch (type) {
          case 'map':
            return 'CPMSeriesMapSettingForm'
          case 'effectScatter':
            return 'CPMSeriesEffectScatterSettingForm'
          case 'scatter':
            return 'CPMSeriesScatterSettingForm'
          case 'lines':
            return 'CPMSeriesLinesSettingForm'
          case 'heatmap':
            return 'CPMSeriesHeatmapSettingForm'
        }
      }
    },
    filters: {
      seriesTypeName: function (value) {
        switch (value) {
          case 'map':
            return '区域热力层'
          case 'effectScatter':
            return '涟漪气泡层'
          case 'scatter':
            return '矢量散点层'
          case 'lines':
            return '飞线层'
          case 'heatmap':
            return '点热力层'
        }
      }
    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style lang="less" scoped>
  .coverage-card {
    img {
      width: 100%;
      height: 120px;
      cursor: pointer;
      &:hover {
        outline: 1px solid #2196f3;
        box-shadow: 0 0 8px #000;
      }
      &.active {
        outline: 1px solid #2196f3;
      }
    }
    margin-bottom: 5px;
  }
</style>
